<template>
  <div class="security-setting">
    <div class="title">
      <span>基本信息</span>
    </div>
    <div class="info">
      <div>
        <span class="info-label">账号</span><span>{{ account.username }}</span>
      </div>
    </div>
    <div class="title">
      <span>密码设置</span>
    </div>
    <div class="info">
      <div><a-button @click="handleUpdatePwd">更改密码</a-button></div>
    </div>
  </div>
  <pwd-modal v-model:open="openModal" v-model:title="title" />
</template>
<script setup>
import {
  DownOutlined,
  UpOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from '@ant-design/icons-vue'
import { ref, reactive } from 'vue'
import PwdModal from './pwd-update-modal.vue'
import { useAccountStore } from '@/stores/account'
import { storeToRefs } from 'pinia'
/**
 * 用户信息
 */
let accountStore = useAccountStore()
let account = storeToRefs(accountStore)

let open = ref(false)
let openModal = ref(false)
let title = ref('更改密码')

function handleUpdatePwd() {
  openModal.value = true
}
</script>
<style lang="less" scoped>
.security-setting {
  background: #ffffff;
  padding: 0px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    border-bottom: 1px solid #f2f2f2;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .info {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    .psw-icon {
      margin-left: 6px;
    }
  }
  .info div {
    margin-top: 24px;
  }
  .info div:last-child {
    margin-bottom: 24px;
  }
  .info-label::after {
    content: ':';
    position: relative;
    top: -0.5px;
    margin-inline: 2px 8px;
  }
  .device-container {
    height: 100%;
    flex: 1;
    overflow: auto;
    margin-bottom: 24px;
  }
  .device {
    background: #fafafa;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    padding: 0px 24px;
  }
  .left-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .device-simple {
      margin: 16px 0px;
    }
  }
  .left-name {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    font-weight: 500;
  }
  .left-time {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 22px;
    margin-top: 4px;
  }
  .right-container {
    display: flex;
    align-items: center;
  }
  .device-info {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    margin: 24px 0px;
    .device-type {
      margin: 16px 0px;
    }
  }
}
</style>
